<template>
	<view class="data">
		<view class="dataDom">
			<view class="title">社区总指标</view>
			<view class="allData dis">
				<view class="dataItem">
					<view class="itemT">用户数</view>
					<view class="itemB">{{ allData.userNum || 0 }}</view>
				</view>
				<view class="dataItem">
					<view class="itemT">帖子数</view>
					<view class="itemB">{{ allData.threadNum || 0 }}</view>
				</view>
				<view class="dataItem">
					<view class="itemT">评论数</view>
					<view class="itemB">{{ allData.threadPostNum || 0 }}</view>
				</view>
				<view class="dataItem">
					<view class="itemT">订单数</view>
					<view class="itemB">{{ allData.orderNum || 0 }}</view>
				</view>
				<view class="dataItem">
					<view class="itemT">总收入</view>
					<view class="itemB">{{ allData.totalIncome || 0 }}</view>
				</view>
			</view>
			<view class="list">
				<view class="tab dis">
					<view class="tabItem" :class="tabId == 0 ? 'avtive' : ''" @click="changeTab(0)">
						<view class="tabName">日报</view>
					</view>
					<view class="tabItem" :class="tabId == 1 ? 'avtive' : ''" @click="changeTab(1)">
						<view class="tabName">月报</view>
					</view>
				</view>
				<view class="listD p20">
					<view class="item p20 dis" v-for="(item, index) in list" :key="index">
						<view class="tiem">{{ item.day }}</view>
						<view class="tit">社区今日指标</view>
						<view class="con p20">
							<view class="allData dis">
								<view class="dataItem">
									<view class="itemT">pv</view>
									<view class="itemB">{{ item.pv || 0 }}</view>
								</view>
								<view class="dataItem">
									<view class="itemT">uv</view>
									<view class="itemB">{{ item.uv || 0 }}</view>
								</view>
								<view class="dataItem">
									<view class="itemT">新增用户</view>
									<view class="itemB">{{ item.userNum || 0 }}</view>
								</view>
								<view class="dataItem">
									<view class="itemT">发帖数</view>
									<view class="itemB">{{ item.threadNum || 0 }}</view>
								</view>
								<view class="dataItem">
									<view class="itemT">发帖人数</view>
									<view class="itemB">{{ item.threadUserNum || 0 }}</view>
								</view>
								<view class="dataItem">
									<view class="itemT">订单数</view>
									<view class="itemB">{{ item.orderNum || 0 }}</view>
								</view>
								<view class="dataItem">
									<view class="itemT">评论数</view>
									<view class="itemB">{{ item.postNum || 0 }}</view>
								</view>
								<view class="dataItem">
									<view class="itemT">评论人数</view>
									<view class="itemB">{{ item.postUserNum || 0 }}</view>
								</view>
								<view class="dataItem">
									<view class="itemT">今日收入</view>
									<view class="itemB">{{ item.income || 0 }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="navList">
				<view class="navItem" @click="goAdmin">
					<view class="icon">
						<image src="/admin/static/19.png" mode=""></image>
					</view>
					<view class="value">工作台</view>
				</view>
				<!-- <view class="navItem">
					<view class="icon">
						<image src="/admin/static/21.png" mode=""></image>
					</view>
					<view class="value">跑腿</view>
				</view> -->
				<view class="navItem">
					<view class="icon">
						<image src="/admin/static/22.png" mode=""></image>
					</view>
					<view class="value active">数据看板</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { totalPpaper, todayPaper, dayPaper, monthPaper } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad((options) => {
	console.log('options', options);
	getData();
});

const allData = ref({});
const todayData = ref({});
const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const getData = async () => {
	const res = await totalPpaper();
	const data = await todayPaper();
	// console.log(res);
	if (res.code == 0) {
		allData.value = res.data;
		todayData.value = data.data.paper;
		getList();
	}
};

const getList = async () => {
	let res;
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value
	};
	if (tabId.value == 0) {
		res = await dayPaper(data);
		if (res.code == 0) {
			const oldList = [...list.value];
			list.value = [...oldList, ...res.data.pageInfo.list];
			total.value = res.data.total;
			if (pageNum.value == 1) {
				list.value.unshift(todayData.value);
			}
		}
	} else {
		res = await monthPaper(data);
		const oldList = [...list.value];
		if (res.code == 0) {
			const newList = res.data.pageInfo.list.map((item) => {
				const yearMonth = item.updateTime.split(' ')[0].split('-').slice(0, 2).join('-');
				return {
					...item,
					day: yearMonth
				};
			});
			console.log(newList);
			const oldList = [...list.value];
			list.value = [...oldList, ...newList];
			total.value = res.data.total;
			if (pageNum.value == 1) {
				todayData.value.day = todayData.value.day.split(' ')[0].split('-').slice(0, 2).join('-');
				list.value.unshift(todayData.value);
			}
		}
	}
};

// 月报日报切换
const tabId = ref(0);
const changeTab = (num) => {
	tabId.value = num;
	pageNum.value = 1;
	total.value = 0;
	list.value = [];
	getList();
};

const goAdmin = () => {
	uni.redirectTo({
		url: '/admin/index/index'
	});
};
onReachBottom(() => {
	console.log('触底加载');
	if (list.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getList();
	}
});
</script>

<style scoped lang="scss">
.data {
	padding-bottom: 120rpx;
	width: 100%;
	.dataDom {
		width: 100%;
		.title {
			width: 100%;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			color: #05c538;
			background-color: #e0f7e3;
		}
		.allData {
			flex-wrap: wrap;
			gap: 15rpx;
			padding-top: 20rpx;
			width: 100%;
			background-color: #fff;
			.dataItem {
				margin-bottom: 15rpx;
				width: 240rpx;
				text-align: center;
				border-right: 2rpx solid #dcdcdc;
				.itemT {
					margin-bottom: 20rpx;
					font-size: 26rpx;
					color: #9c9c9c;
				}
				.itemB {
					font-size: 26rpx;
					color: #676767;
				}
			}
			.dataItem:nth-child(3n) {
				border-right: none;
			}
		}
		.list {
			margin-top: 30rpx;
			width: 100%;
			.tab {
				justify-content: space-around;
				align-items: center;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 26rpx;
				background-color: #fff;
				.tabItem {
					// width: 120rpx;
					text-align: center;
					color: #656565;
				}
				.avtive {
					position: relative;
					color: #000;
					font-weight: 700;
					font-size: 30rpx;
				}
				.avtive::after {
					position: absolute;
					bottom: 0;
					left: 50%;
					display: block;
					content: '';
					width: 45rpx;
					height: 8rpx;
					border-radius: 8rpx;
					background: #179bf1;
					transform: translateX(-60%);
				}
			}
			.listD {
				width: 100%;
				.item {
					flex-direction: column;
					align-items: center;
					width: 100%;
					.tiem {
						padding: 5rpx 15rpx;
						border-radius: 10rpx;
						border: 2rpx solid #02c7fe;
						color: #02c7fe;
						font-size: 26rpx;
					}
					.tit {
						margin-top: 20rpx;
						padding-left: 20rpx;
						width: 100%;
						border-left: 4rpx solid #02c7fe;
						font-size: 26rpx;
					}
					.con {
						margin-top: 20rpx;
						width: 100%;
						border-radius: 15rpx;
						background-color: #fff;
						.allData {
							flex-wrap: wrap;
							gap: 0rpx;
							padding-top: 20rpx;
							width: 100%;
							background-color: #fff;
							.dataItem {
								margin-bottom: 20rpx;
								width: 210rpx;
								text-align: center;
								border-right: 2rpx solid #dcdcdc;
								.itemT {
									margin-bottom: 20rpx;
									font-size: 26rpx;
									color: #9c9c9c;
								}
								.itemB {
									font-size: 26rpx;
									color: #676767;
								}
							}
							.dataItem:nth-child(3n) {
								border-right: none;
							}
						}
					}
				}
			}
		}
	}
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 110rpx;
		background: white;
		border-top: 1rpx solid #f0f0f0;
		z-index: 2025;
		.navList {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 100%;
			.navItem {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100%;
				.icon {
					width: 50rpx;
					height: 50rpx;
				}
				.value {
					font-size: 24rpx;
					color: #666;
				}
				.active {
					color: #00c2fa;
				}
			}
		}
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
</style>
